<template>
  <div class="root-container">
    <div class="header-container">
      <Navigation />
    </div>
    <el-scrollbar height="100vh" style="width: 100%">
      <div class="mian-container-wrapper">
        <div class="mian-container">
          <router-view />
        </div>
      </div>
    </el-scrollbar>
    <div class="footer-container"></div>
  </div>
</template>

<script setup>
import Navigation from "@/components/Navigation";
import useCommonStore from "@/stores/commonStore";

const commonStore = useCommonStore();

// 组件挂载时初始化监听
onMounted(() => {
  commonStore.initWindowListener();
});

// 组件卸载时清理监听
onUnmounted(() => {
  commonStore.removeWindowListener();
});
</script>

<style scoped>
.root-container {
  width: 100vw;
  min-height: 100vh;
}

.header-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 48px;
  background-color: var(--el-bg-color);
}

.footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 24px;
  background-color: var(--el-bg-color);
}

.mian-container-wrapper {
  display: flex;
  justify-content: center;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
}
.mian-container {
  width: 100%;
  min-width: 320px;
  max-width: 960px;
  min-height: 100vh;
  padding: 64px 16px 24px 16px;
}
</style>
